// 饼图
<template>
	<div :id="id" style="height:248px;padding:12px;" />
</template>
<script>
    export default {
        name: 'Annular',
        // eslint-disable-next-line vue/require-prop-types
        props: ['id', 'time'],
        data() {
            return {
                echartData: {},
                echartDataMain: [],
                myCharts: null
            }
            
        },
        mounted() {
            this.drawLine()
        },
        methods: {
             drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById(this.id))
                
                // 绘制图表
                myChart.setOption({
                    backgroundColor: '#f8f8f8',
                    title: {
                        text: '年龄分布',
                        x: 'center',
                        top: 16,
                        textStyle: {
                            color: '#222',
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        show: true,
                        formatter: "{b}:{c}%"
                    },
                    grid: {
                        left: '6%',
                        top: '15%',
                        right: '6%',
                        bottom: '4%',
                        containLabel: true
                    },

                    xAxis: {
                        type: 'value',
                        show: true,
                        position: 'bottom',
                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: '#008bca'
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#008bca',
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#eee'
                            }
                        },
                        splitArea: {
                            show: true,
                            interval: 1,
                            areaStyle: {
                                color: ['#fff', '#f9f9f9']
                            }
                        }
                    },
                    yAxis: [{
                        type: 'category',
                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: '#008bca'
                            }
                        },
                        splitLine: { //网格线
                            show: false,
                            lineStyle: {
                                color: '#008bca'
                            }
                        },
                        inverse: 'true', //排序
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#008bca'
                            }
                        },
                        data: ["1990", "1994", "1992", "1993", "1991", "1989", "1995", "1988", "1996", "1987", "2000", "1986", "1997", "1985", "1998", "2018", "1984", "1999", "1982", "1983"]//此处修改为data.data.x_axis_data
                    }

                    ],
                    series: [{
                        name: '年龄分布',
                        type: 'bar',
                        label: {
                            normal: {
                                show: false,
                            }
                        },
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#31c7c8',
                            }
                        },
                        data: [8.91, 7.86, 7.31, 7.19, 6.97, 6.81, 6.79, 6.44, 5.27, 4.93, 4.64, 4.22, 3.85, 3.27, 3.08, 2.81, 2.6, 2.38, 2.34, 2.33]//此处修改为data.data.series_data
                    }
                    ]
                });
            },
            initCharts() {
                this.chart = this.$echarts.init(document.getElementById(this.id))
                this.setOptions()
            },
            setOptions() {
                this.chart.setOption({
                    backgroundColor: '#f8f8f8',
                    title: {
                        text: '年龄分布',
                        x: 'center',
                        top: 16,
                        textStyle: {
                            color: '#222',
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        show: true,
                        formatter: "{b}:{c}%"
                    },
                    grid: {
                        left: '6%',
                        top: '15%',
                        right: '6%',
                        bottom: '4%',
                        containLabel: true
                    },

                    xAxis: {
                        type: 'value',
                        show: true,
                        position: 'bottom',
                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: '#008bca'
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#008bca',
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#eee'
                            }
                        },
                        splitArea: {
                            show: true,
                            interval: 1,
                            areaStyle: {
                                color: ['#fff', '#f9f9f9']
                            }
                        }
                    },
                    yAxis: [{
                        type: 'category',
                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: '#008bca'
                            }
                        },
                        splitLine: { //网格线
                            show: false,
                            lineStyle: {
                                color: '#008bca'
                            }
                        },
                        inverse: 'true', //排序
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#008bca'
                            }
                        },
                        data: ["1990", "1994", "1992", "1993", "1991", "1989", "1995", "1988", "1996", "1987", "2000", "1986", "1997", "1985", "1998", "2018", "1984", "1999", "1982", "1983"]//此处修改为data.data.x_axis_data
                    }

                    ],
                    series: [{
                        name: '年龄分布',
                        type: 'bar',
                        label: {
                            normal: {
                                show: false,
                            }
                        },
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#31c7c8',
                            }
                        },
                        data: [8.91, 7.86, 7.31, 7.19, 6.97, 6.81, 6.79, 6.44, 5.27, 4.93, 4.64, 4.22, 3.85, 3.27, 3.08, 2.81, 2.6, 2.38, 2.34, 2.33]//此处修改为data.data.series_data
                    }
                    ]
                })
            }
        }
    }
</script>
